In diesem Kapitel schauen wir uns die Grundlagen der prozeduralen Programmierung in JavaScript an, nämlich Verzweigungen, Schleifen und Arrays.

Zunächst die "if"-Verzweigung, die man einzeln verwenden kann oder in Kombination mit einem "else" oder mit beliebig vielen "else if"-Blöcken dazwischen. Die Ausgabe erfolgt hier immer in einer JavaScript-Konsole, die man im Web-Browser anschalten kann.

Die "for"-Schleife ist genauso wie in den Sprachen C oder Java. Zunächst wird die Laufvariable i definiert und mit dem Startwert initialisiert. Dann kommt die Bedingung, die für einen weiteren Schleifendurchlauf erfüllt sein muss. Als Drittes kommt dann die Inkrementierung der Laufvariablen. Die Schleife wird dann einmal in einem Block ausgeführt, wonach die Bedingung nochmals geprüft wird. Ist die Bedingung nochmals erfüllt (true), wird die Laufvariable nochmals für den nächsten Schleifendurchlauf erhöht. Befindet sich nur eine Anweisung in der Schleife, so kann der Block weggelassen werden. Die untere Schleife entspricht der Ausführung zu Zwecken der Veranschaulichung; in der Realität sollte man so natürlich keine "for"-Schleife programmieren. Mit "break" wird die Schleife unmittelbar verlassen.

Mittels einer "for-in"-Schleife kann man über alle aufzählbaren Eigenschaften eines Objektes iterieren. Die Variable stellt den Eigenschaftsnamen als String dar. Dies funktioniert auch mit Arrays, da Arrays Objekte sind und die Indizes Eigenschaftsnamen sind. Die Reihenfolge ist aber nicht garantiert.

Die "for-of"-Schleife iteriert über alle Elemente eines iterierbaren Objektes. Iterierbare Objekte sind Array, Typed-Arrays und Maps. Es werden nur eigene Eigenschaften iteriert. Die Variable enthält den Wert der Eigenschaft und nicht den Namen.

Ebenso existiert in JavaScript eine fußgesteuerte "do-while"-Schleife sowie eine kopfgesteuerte "while"-Schleife.

Hier haben wir ein erstes Beispiel für ein indiziertes Array. Auf den ersten Blick ungewöhnlich ist, dass man keine Obergrenze und auch keine Anzahl der Elemente beim Anlegen des Arrays angeben muss. Das wird alles von JavaScript selbst verwaltet. Dann wird das Array mit zwei Elementen befüllt. Das Array selbst ist untypisiert, man kann also Daten von beliebigen Datentypen hineinwerfen. Die erste Ausgabe zeigt an, dass das Array zwei Elemente lang ist. Dann kann man einen viel weiter hinten gelegenen Index befüllen, hier zweiundzwanzig. Gibt man das ganze Array aus, so sieht man die Lücke dazwischen. Die "length" des Arrays wird aber dadurch auf dreiundzwanzig aufgefüllt. Spricht man ein Element dazwischen in der Lücke an, so ist dieses bislang "undefined".

Man kann auch eine initiale Größe im Konstruktor des Arrays angeben, hier: drei. Das Array ist dann aber doch in der Lage, bei Bedarf dynamisch zu wachsen.

Hier sehen Sie alternative Möglichkeiten zur Initialisierung eines Arrays in JavaScript. Die Werte können auch direkt über den Konstruktor eingegeben werden. Alternativ dazu können Arrays auch über die direkte Angabe eines Werte-Tupels in eckigen Klammern angelegt werden.

Auch interessant ist die Möglichkeit, einzelne Elemente aus einem JavaScript-Array mit "delete" zu löschen. Die Länge des Arrays beeinflusst das Löschen in der Mitte aber nicht, die anderen Positionen bleiben unverändert.

Spannend ist auch die mächtige "splice"-Methode in JavaScript. Sie kann dynamisch mehrere Elemente in ein Array hinzufügen oder auch entfernen. Beim Entfernen werden die entfernten Elemente als Rückgabewert der Funktion zurückgegeben.

Schauen wir uns einmal die Elementeinfügung via splice genauer an. Hier werden die Elemente "Lemon" und "Kiwi" an der zweiten Position eingefügt. Bedenken Sie, dass die indizierten Arrays in JavaScript bei Null beginnen.

Nun wird die Methode genutzt, um Elemente zu löschen. Es sollen zwei Elemente ab der Position zwei im Array entfernt werden. Dies sind in unserem Fall "Apple" und "Mango". "Banana" ist an der Position Null, "Orange" an Position eins und "Kiwi" rückt durch das Löschen von der Position vier an die Position zwei vor. Im Gegensatz zu "delete" entstehen dadurch keine Lücken.

Man kann das Element "d" problemlos wie erwartet an die letzte Position eines JavaScript-Arrays hinzufügen, weil das Array ja dynamisch wächst. Noch einfacher ist aber die Verwendung der vorgegebenen "push"-Funktion, die hier das Element "e" hinten an das Array hängt.

Abschließend schauen wir uns noch assoziative Arrays in JavaScript an. Dies ist ein besonderes Array mit einem String als Index, über den man dann auf den Inhalt zugreifen kann. Dabei sind wieder unterschiedliche Typen als Inhalt möglich. Ein solches assoziative Array ist ähnlich zu einer Map in Java. Die Erzeugung eines solchen Arrays kann wie gewohnt über den Konstruktor stattfinden. Ein Element kann durch Zugriff auf den Index in eckigen Klammern ausgelesen werden, wobei der Index jetzt in Hochkommata zu setzen ist, weil es ja ein String ist. Sie können über eine "for-in"-Schleife über das Array iterieren, wobei ein Element nach dem anderen zurückgegeben wird.

Hier sehen Sie das Anlegen eines assoziativen Arrays in JavaScript und den schreibenden und lesenden Zugriff darauf. Dieses Array gibt durch den Zugriff auf den englischen Begriff das deutsche Gegenstück des Begriffs zurück und kann daher als Übersetzer verwendet werden. Abschließend sehen Sie den iterierenden Zugriff über die "for-in"-Schleife, die den Index und den Wert hinter dem Index ausgibt. "Document write" schreibt direkt in die Ausgabe. Eine solche Ausgabe kann beispielsweise im "body"-Teil des HTML-Dokuments erfolgen. Die Ausgabe ist dann HTML-Code im Web-Browser und wird als solcher gerendert.

Hier sehen Sie abschließend eine alternative Art, das assoziative Array anzulegen. Dies geschieht über die geschweiften Block-Klammern. Die einzelnen Index-Wert-Paare werden durch ein Komma getrennt. Der Index und der Wert eines Elementes werden durch einen Doppelpunkt getrennt.